<!--公司公告-栏目管理 NoticeColumn-->
<template>
  <div class='page_format'>
    <div class="my_Select">
      <el-form :inline="true" class="search-form">
        <el-form-item>
          <el-button class="bt-color-tjd" type="primary" v-if="is_show_button('button_column_save')"
                     @click="saveDataForm">添加栏目</el-button>
        </el-form-item>
        <el-form-item>
          <el-input style="width:140px;margin-right:8px" size="small" placeholder="栏目名称" v-model="queryValue"
                    clearable></el-input>
          <el-button size="small" @click="handleQuery" icon="el-icon-search" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" :index="sort" label="序号" width="50"></el-table-column>
      <el-table-column prop="name" label="栏目名称"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间"></el-table-column>
      <el-table-column prop="noticeCount" label="公告数量"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <span :style="`color:${scope.row.status === '0'?'red':'green'}`">{{ scope.row.status === '0' ? '否' : '是'
            }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="is_show_button('button_column_save')" fixed="right" label="操作" width="100">
        <template v-slot="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">
            编辑
          </el-button>
          <el-button @click="handleButtonClick(scope.row)" type="text"
                     size="small">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog :title="form.noticeColumnId ?'修改栏目':'添加栏目'" :visible.sync="dialogFormVisible" center @close="closeDialog">
      <el-form :model="form" :rules="rules" ref="dialogForm" >
        <el-form-item label="栏目名称：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入栏目名称" ></el-input>
        </el-form-item>
        <el-form-item label="栏目描述：" :label-width="formLabelWidth">
          <el-input v-model="form.description" placeholder="请输入栏目描述" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否显示：" :label-width="formLabelWidth">
          <el-switch
              v-model="form.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" :disabled="submitLoading">取 消</el-button>
        <el-button class="bt-color-tjd" v-if="is_show_button('button_column_save')" type="primary"
                   @click="saveDataApi" :loading="submitLoading">确 定
        </el-button>
      </div>
    </el-dialog>
    <Toast :dialogVisible="dialogVisible" @isDelete="deleteDataApi"></Toast>
  </div>
</template>

<script>
import { post } from '@/api/my_axios'
import { changSort } from '@/utils/aqi'

export default {
  name: '',
  data () {
    return {
      submitLoading: false, // 按钮loading
      dialogFormVisible: false,
      dialogVisible: false,
      form: {
        name: '',
        description: '',
        status: ''
      },
      list: [],
      formLabelWidth: '140px',
      pageSize: 20,
      pageNum: 1,
      total: 0,
      id: '',
      queryValue: '',
      rules: {
        name: [{ required: true, message: '必填项不能为空！', trigger: 'change' }]
      }
    }
  },

  mounted () {
    this.getNoticeColumnList()
  },

  methods: {
    // 排序 （序号）
    sort (index) {
      return changSort(index, this.pageNum, this.pageSize)
    },

    // 新增
    saveDataForm () {
      this.dialogFormVisible = true
      this.form.status = '0'
    },

    // 修改
    handleClick (data) {
      this.dialogFormVisible = true
      Object.keys(data).forEach(key => {
        this.form[key] = data[key]
      })
    },

    // 关闭dialog框
    closeDialog () {
      this.dialogFormVisible = false
      this.submitLoading = false
      Object.keys(this.form).forEach(key => {
        this.form[key] = ''
      })
      this.$refs.dialogForm.resetFields()
    },

    getNoticeColumnList () {
      const { queryValue, pageSize, pageNum } = this
      this.$store.dispatch('getNoticeColumnList', { queryValue: queryValue, pageSize, pageNum }).then(res => {
        this.list = res.data
        this.total = res.total
      })
    },

    saveDataApi () {
      this.$refs.dialogForm.validate(valid => {
        if (!valid) return false
        this.submitLoading = true
        post('/api/crm/sys/manage/notice/saveColumnInfo', this.form).then(req => {
          if (req && req.code === 200) {
            this.$message({ message: req.msg, type: 'success' })
          } else {
            this.$message({ message: req.msg, type: 'error' })
          }
        }).finally(() => {
          this.getNoticeColumnList()
          this.closeDialog()
        })
      })
    },

    deleteDataApi (type) {
      if (type === 'ok') {
        post('/api/crm/sys/manage/notice/deleteColumnById', this.id
        ).then(req => {
          if (req && req.code === 200) {
            this.$message({ message: req.msg, type: 'success' })
            this.getNoticeColumnList()
          }
        })
      }
      this.dialogVisible = false
    },

    handleQuery () {
      this.pageNum = 1
      this.getNoticeColumnList()
    },

    handleSizeChange (val) {
      this.pageSize = val
      this.getNoticeColumnList()
    },

    handleCurrentChange (val) {
      this.pageNum = val
      this.getNoticeColumnList()
    },

    handleButtonClick (data) {
      this.id = data.noticeColumnId
      this.dialogVisible = true
    },

    is_show_button (name) {
      let show = false
      this.$store.state.module1.menu_list.forEach(v => {
        // eslint-disable-next-line eqeqeq
        if (v.path === name) {
          show = true
        }
      })
      return show
    }
  }
}
</script>

<style lang='scss'>
.page_format {
  padding: 56px 20px 140px 20px;
}
.search-form{
  margin-top: 10px;
}

.icon-image {
  width: auto;
  height: auto;
  object-fit: cover;
}
</style>
